<template>
	<view class="pickPicsBox">
		<view class="picsList" v-for="(item, index) in imgsList" :key="index">
			<image :src="item" mode="aspectFill" @click="previewImage(index)"></image>
			<view class="del" @click="delImage(index)">x</view>
		</view>
		<view class="addPics" @click="chooseImage" v-if="imgsList.length < 9">+</view>
	</view>
</template>

<script>
	export default {
		name: 'imagesBox',
		data() {
			return {
				// 图片缓存地址
				imgsList: [],
			}
		},
		methods: {
			// 添加图片
			chooseImage() {
				uni.chooseMedia({
						count: 9,
						mediaType: 'image'
					})
					.then(res => {
						let imgsList = []
						res[1].tempFiles.forEach((item, index) => {
							imgsList.push(item.tempFilePath)
						})
						this.imgsList = [...this.imgsList, ...imgsList]
						// 判断是否多余9张图片
						if (this.imgsList.length > 9) {
							this.imgsList.splice(9)
							uni.showToast({
								title: '最多上传9上图片',
								icon: "none"
							})
						}
					})
			},
			// 预览图片
			previewImage(index) {
				uni.previewImage({
					urls: this.imgsList,
					current: index
				})
			},
			// 删除图片
			delImage(index) {
				this.imgsList.splice(index, 1)
			},
		}
	}
</script>

<style scoped lang="scss">
	// 图片添加区域
	.pickPicsBox {
		width: 700rpx;
		margin-left: 20rpx;
		// background-color: #9d9d9d;
		display: flex;
		flex-wrap: wrap;

		.picsList {
			display: inline-block;
			margin-right: 10rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 200rpx;
			height: 200rpx;
			overflow: hidden;
			border-radius: 10rpx;
			margin-bottom: 10rpx;
			position: relative;

			// 删除按钮
			.del {
				display: block;
				position: absolute;
				background-color: #5e5e5e;
				width: 35rpx;
				height: 35rpx;
				line-height: 25rpx;
				font-size: 38rpx;
				text-align: center;
				border-radius: 50%;
				opacity: 0.8;
				color: white;
				top: 8rpx;
				right: 8rpx;
			}
		}

		// 加图片按钮
		.addPics {
			box-sizing: border-box;
			text-align: center;
			line-height: 200rpx;
			width: 200rpx;
			height: 200rpx;
			background-color: #f7f7f7;
			border-radius: 10rpx;
			font-size: 100rpx;
			color: #717171;
		}
	}
</style>
